<template>
  <div class="OrderStatisticsStyle">
    <div class="OrderStatisticsTop">
      <p>订单统计</p>
      <div class="OrderStatisticsTopButton">
        <div v-for="(ButtonItem,index) in buttons" :key="index">
          <el-button plain :type="ButtonItem.active ? 'primary' : ''" @click="selectButton(ButtonItem,index)">{{ ButtonItem.text }}</el-button>
        </div>
      </div>

    </div>

    <div id="main" style="width: 700px;height: 500px;"></div>
    
  </div>
</template>

<script setup>
import { getStatisticsThreeApi } from '@/api/console/ConsoleApi';
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';

onMounted(() => {
  OnStatisticsThreeData()
  OnECharts()
})

// 用来接受ECharts的DOM  后期判断他的值
const chart = ref(null)

// ECharts的属性
const EChartsOption = reactive({
  tooltip: {},
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: []
    }
  ]
})


const buttons = ref([  
  { text: '近一个月', active: true, type:'month' },  
  { text: '近一周', active: false, type:'week' },  
  { text: '近24小时', active: false, type:'hour' }
]);  

const ButtonActiveType = ref('month')
  
const selectButton = (ButtonItem,index) => {  
  buttons.value.forEach((btn, idx) => {  
    if (idx === index) {  
      btn.active = true;
      ButtonActiveType.value = ButtonItem.type
      OnStatisticsThreeData()
    } else { 
      btn.active = false;  
    }  
  });  
 };  

// 获取token存储到对象中
const UserToken = localStorage.getItem('user-token'); 
const TokenData = reactive({
  BAT:ButtonActiveType,
	tt:{token:UserToken}
})

// 后台首页统计 3 的数据
const OnStatisticsThreeData = async () => {
	const { data } = await getStatisticsThreeApi(TokenData)
  EChartsOption.xAxis.data = data.x
  EChartsOption.series[0].data = data.y
  OnECharts()
}

const OnECharts = () => {
  if (chart.value){
    chart.value.setOption(EChartsOption)
  }else{
    chart.value = echarts.init(document.getElementById('main'))
    chart.value.setOption(EChartsOption); 
  }
}
</script>

<style lang="scss" scoped>
.OrderStatisticsStyle{
  background-color: #ffffff;

  .OrderStatisticsTop{
    display: flex;
    justify-content: space-between;

    .OrderStatisticsTopButton{
      display: flex;
    }

  }

}
</style>